<template>
  <main>
    <!-- 背景1 -->
    <div class="bg1">
      
      <img :src="sjfx1.bgImg" alt="" class="banner">
      <span class="zhjd">{{sjfx1.title}}</span>
      <span class="zhfw"
        >{{sjfx1.subtitle}}</span
      >
    </div>
    <!-- 背景1 -->
    <!-- 背景2 -->
    <div class="bg2">
      <div v-html="sjfxxqy1" class="bg22"></div>
    </div>
    <!-- 背景2 -->
    <!-- 背景3 -->
    
    <!-- 背景4 -->
    <Header></Header>
    <Footer></Footer>
  </main>
</template>

<script>
//引入头部组件
import { getSjfx,getSjfxxqy } from "@/api/wslapi/";
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
export default {
  created () {
    this.sjfx()
    this. sjfxxqy()
  },
  data () {
    return {
    sjfx1:[] , 
    sjfxxqy1:[]
    }
  },
  methods: {
    sjfxxqy(){
       getSjfxxqy().then((res) => {
        this.sjfxxqy1 = res.data.content;
        console.log(res.data.content);
      });
    },
    sjfx(){
       getSjfx().then((res) => {
        this.sjfx1 = res.data.data;
        console.log(res.data.data);
      });
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.bg1 {
  height: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
  .banner {
    height: 600px;
    width: 100%;
  }
  .zhjd {
    min-width: 206px;
    height: 67px;
    font-size: 48px;
    color: #ffffff;
    position: absolute;
    top: 230px;
    left: 361px;
  }
  .zhfw {
    min-width: 670px;
    height: 66px;
    font-size: 24px;
    color: #ffffff;
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
.bg2 {
  height: 3400px;
  width: 1920;
  position: relative;
  // left: -4.167vw;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  .bg22{
    width: 100%;
    height: 100%;
  }
  .sjfx {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 876px;
  }
  .fh1 {
    min-width: 882px;
    height: 40px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 519px;
  }
  .img1 {
    width: 584px;
    height: 380px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 360px;
    .img11 {
      width: 584px;
      height: 285px;
      position: absolute;
      top: 18px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 340px;
        width: 100%;
      }
      .image1 {
        width: 584px;
      }
    }
    .jygl {
      min-width: 125px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 328px;
      left: 214px;
    }
  }
  .img2 {
    min-width: 584px;
    height: 380px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 974px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 320px;
      width: 100%;
    }
    .img22 {
      min-width: 560px;
      height: 320px;
      position: absolute;
      top: 0px;
      left: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 320px;
        width: 100%;
      }
      .image2 {
        min-width: 560px;
      }
    }
    .cgfx {
      min-width: 125px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 328px;
      left: 214px;
    }
  }
  .img3 {
    min-width: 787px;
    height: 388px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 670px;
    left: 360px;

    .img33 {
      width: 787px;
      height: 257px;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 257px;
        width: 100%;
      }
      .image3 {
        width: 787px;
      }
    }
    .fjtj {
      width: 136px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 336px;
      left: 326px;
    }
  }
  .img4 {
    min-width: 381px;
    height: 388px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 670px;
    left: 1178px;
    .img44 {
      width: 381px;
      height: 320px;
      position: absolute;
      top: 0;
      left: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 350px;
        width: 100%;
      }
      .image4 {
        width: 350px;
      }
    }
    .zxcz {
      min-width: 146px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 336px;
      left: 118px;
    }
  }
  .img5 {
    min-width: 1198px;
    height: 355px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    position: absolute;
    top: 1088px;
    left: 360px;
    .img55 {
      width: 1098px;
      height: 341px;
      position: absolute;
      top: 14px;
      left: 51px;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 355px;
        width: 100%;
      }
      .image5 {
        width: 1098px;
      }
    }
  }
}
.bg3 {
  height: 670px;
  background: #f6f8fb;
  position: relative;
  .fh2 {
    min-width: 619px;
    height: 56px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 650px;
  }
  .img66 {
    width: 279px;
    height: 384px;
    position: absolute;
    top: 191px;
    left: 359px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 384px;
      width: 100%;
    }
    .image6 {
      width: 279px;
    }
  }
  .img77 {
    width: 279px;
    height: 384px;
    position: absolute;
    top: 191px;
    left: 667px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 384px;
      width: 100%;
    }
    .image7 {
      width: 279px;
    }
  }
  .img88{
    width: 279px;
    height: 384px;
    position: absolute;
    top: 191px;
    left: 975px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 384px;
      width: 100%;
    }
  .image8 {
     width: 279px;
  }}
  .img99{
   width: 279px;
    height: 384px;
    position: absolute;
    top: 191px;
    left: 1283px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 384px;
      width: 100%;
    }
  .image9 {
    width: 279px;

  }}
}
.bg4 {
  height: 943px;
  position: relative;
  .yhhx {
    min-width: 248px;
    height: 56px;
    font-size: 40px;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 836px;
  }
  .fxjg {
    min-width: 818px;
    height: 40px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 551px;
  }
  .icon11{
    width: 747px;
    height: 435px;
    position: absolute;
    top: 260px;
    left: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 435px;
      width: 100%;
    }
  .icon1 {
    width: 747px;
  }}
  .image10 {
    min-width: 502px;
    height: 47px;
    position: absolute;
    top: 796px;
    left: 711px;
  }
}
</style>
